<template>
  <div class="box">
    <div class="search_div1">
      <van-icon class="icon1" name="manager" />
      <van-search
        class="search1"
        shape="round"
        background="#fff"
        placeholder="请输入搜索关键词"
        @search="handleSearch"
      />
      <span class="spanseach" @click="handleSearch">搜索</span>
    </div>
    <!-- 搜索历史 -->
    <div class="history_box" v-show="!isSearching">
      <p class="history">搜索历史</p>
    </div>
    <!-- 结果页面 -->
    <div class="result_box" v-show="isSearching">结果</div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const isSearching = ref(false) // 控制搜索历史和结果页面的显示状态
function handleSearch() {
  isSearching.value = true // 当执行搜索时，切换到结果页面
}
</script>
<style scoped lang="scss">
.box {
  width: 100vw;
  height: 100vh;
  background-color: rgb(223, 221, 221);
  display: flex;
  flex-direction: column;
}
.search_div1 {
  display: flex;
  height: 5vh;
  justify-content: space-between;
  background-color: white;

  .search1 {
    flex: 1;
  }

  .icon1 {
    font-size: 30px;
    margin: 80px;
  }
  .spanseach {
    color: rgb(77, 151, 236);
    margin: 8px;
  }
}
// 搜索历史
.history_box {
  width: 100%;
  flex: 1;
  margin-top: 1.5vh;
  background-color: white;
  .history {
    color: rgb(50, 152, 203);
    margin-left: 16px;
    margin-top: 16px;
  }
}
//结果页面
.result_box {
  width: 100%;
  flex: 1;
  margin-top: 1.5vh;
  background-color: white;
}
</style>
